<script setup>

import {ArrowLeft} from "@element-plus/icons-vue";
</script>

<template>
  <div style="display: flex;
                align-items: center;
                justify-content: flex-end;
                font-size: 14px;
                color: #7F7F7F;
                margin-bottom: 20px;
                margin-right: 77px">
    <el-icon><ArrowLeft /></el-icon>
    <span >返回</span>
  </div>
  <div style="background-color:#F0F2F5;padding: 0;width: 100%;height: 100%;">
    <el-card shadow="never" style="background-color:#fff;padding:5px 0;width: 1150px;margin: 0 auto 20px auto;">
      <!--    借阅人-->
      <span class="form-header">患者信息</span>
      <el-form  label-width="auto" label-position="left"  style=" margin-top: 20px; padding: 0 20px">
        <el-row :gutter="10" >
          <el-col :span="8">
            <el-form-item  size="small" required class="custom-form-item" label="病案号" >
              <!--            <el-input style="color:#000000;" class="custom-input" placeholder="点击选择患者或手动输入" ></el-input>-->
              <el-select  filterable :clearable="true" size="small"  placeholder="点击选择患者或手动输入"  class="custom-input">
                <el-option  label="张三" value="张三" ></el-option>
                <el-option  label="里斯" value="里斯" ></el-option>
                <el-option  label="王五" value="王五"  ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item required class="custom-form-item" label="住院号" >
              <el-select  filterable :clearable="true"  placeholder="点击选择患者或手动输入" size="small" class="custom-input">
                <el-option  label="张三" value="张三" ></el-option>
                <el-option  label="里斯" value="里斯" ></el-option>
                <el-option  label="王五" value="王五"  ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item required  >
              <div style="padding: 0 20px;color: red"> *
                <span style="color: #AAAAAA; font-size: 13px" >选择后数据将自动代入输入框及表格</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" >
          <!--:column="3"-->
          <el-descriptions   border >
            <!--          患者姓名-->
            <el-descriptions-item
                label="患者姓名"
                label-align="center"
                align="center"
                width="200px"
                class-name="my-content"
                label-class-name="my-label"
            >
              <span style="caret-color: #2c3e50">kooriookami</span>
            </el-descriptions-item>
            <!--          患者性别-->
            <el-descriptions-item
                label-class-name="my-label"
                label="性别"
                label-align="center"
                align="center"
                width="200px" >
              <span>kooriookami</span>
            </el-descriptions-item>
            <!--          年龄-->
            <el-descriptions-item
                label-class-name="my-label"
                label="年龄"
                abel-align="center"
                align="center"
                width="200px">
              <span>kooriookami</span>
            </el-descriptions-item>
            <!--          住院病区-->
            <el-descriptions-item
                label-class-name="my-label"
                label="住院病区"
                label-align="center"
                align="center"
                width="200px">
              <span style="caret-color: #2c3e50">kooriookami</span>
            </el-descriptions-item>
            <!--          入院时间-->
            <el-descriptions-item
                label-class-name="my-label"
                label="入院时间"
                label-align="center"
                align="center"
                width="200px">
              <span>kooriookami</span>
            </el-descriptions-item>
            <!--          出院时间-->
            <el-descriptions-item
                label-class-name="my-label"
                label="出院时间"
                label-align="center"
                align="center"
                width="200px">
              <span >kooriookami</span>
            </el-descriptions-item>
            <!--          出院诊断-->
            <el-descriptions-item
                label-class-name="my-label"
                label="出院诊断"
                label-align="center"
                align="left"
                width="200px">
              <span>kooriookami</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-row>
      </el-form>

      <el-descriptions :column="4"   style="  margin-top:20px;padding: 0 20px" v-for="(item,index) in patientInfo">
        <!--          病案号-->
        <el-descriptions-item
            :label="item"
            label-align="left"
            align="left"
            width="200px"
            class-name="my-content"
            label-class-name="my-label"
        >
          <span style="caret-color: #2c3e50">kooriookami</span>
        </el-descriptions-item>
        <!--          住院号-->
        <el-descriptions-item
            label="住院号："
            label-align="left"
            align="left"
            width="200px"
            class-name="my-content"
            label-class-name="my-label"
        >
          <span style="caret-color: #2c3e50">kooriookami</span>
        </el-descriptions-item>
        <!--          患者姓名-->
        <el-descriptions-item
            label="患者姓名："
            label-align="left"
            align="left"
            width="200px"
            class-name="my-content"
            label-class-name="my-label"
        >
          <span style="caret-color: #2c3e50">kooriookami</span>
        </el-descriptions-item>
        <!--          患者性别-->
        <el-descriptions-item
            label="性别："
            label-align="left"
            align="left"
            width="200px"
            class-name="my-content"
            label-class-name="my-label"
        >
          <span style="caret-color: #2c3e50">kooriookami</span>
        </el-descriptions-item>
        <!--          年龄-->
        <el-descriptions-item
            class-name="my-content"
            label-class-name="my-label"
            label="年龄："
            label-align="left"
            align="left"
            width="200px">
          <span>kooriookami</span>
        </el-descriptions-item>
        <!--          住院病区-->
        <el-descriptions-item
            class-name="my-content"
            label-class-name="my-label"
            label="住院病区："
            label-align="left"
            align="left"
            width="200px">
          <span style="caret-color: #2c3e50">kooriookami</span>
        </el-descriptions-item>
        <!--          入院时间-->
        <el-descriptions-item
            class-name="my-content"
            label-class-name="my-label"
            label="入院时间："
            label-align="left"
            align="left"
            width="200px">
          <span>kooriookami</span>
        </el-descriptions-item>
        <!--          出院时间-->
        <el-descriptions-item
            class-name="my-content"
            label-class-name="my-label"
            label="出院时间："
            label-align="left"
            align="left"
            width="200px">
          <span >kooriookami</span>
        </el-descriptions-item>
        <!--          出院诊断-->
        <el-descriptions-item
            class-name="my-content"
            label-class-name="my-label"
            label="出院诊断："
            label-align="left"
            align="left"
            width="200px">
          <span>kooriookami</span>
        </el-descriptions-item>
      </el-descriptions>

      <span class="form-header" style="margin-top: 20px">借阅信息</span>
      <el-form  label-width="auto" label-position="left"  style=" margin-top: 20px; padding: 0 20px">
        <el-row :gutter="10" >
          <el-col :span="8">
            <el-form-item   class="custom-form-item" label="借阅人" required >
              <el-select  filterable :clearable="true"  placeholder="请选择借阅人"  class="custom-input" size="small">
                <el-option disabled label="请选择借阅人" ></el-option>
                <el-option  label="张三" value="张三" ></el-option>
                <el-option  label="里斯" value="里斯" ></el-option>
                <el-option  label="王五" value="王五"  ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item required class="custom-form-item" label=借阅日期 >
              <el-date-picker
                  type="date"
                  clearable
                  placeholder="年 /月/日"
                  format="YYYY/MM/DD"
                  v-model="aa"
                  size="small"
                  class="custom-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item required class="custom-form-item" label=归还时间 >
              <el-date-picker
                  type="date"
                  clearable
                  placeholder="年 /月/日"
                  format="YYYY/MM/DD"
                  v-model="aa"
                  size="small"
                  class="custom-input"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" >
          <el-col :span="24">
            <el-form-item   class="custom-form-item" label="借阅原因" required >
              <el-input size="small" style="color:#000000;" type="textarea" class="custom-input-one" placeholder="请选择借阅人" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div style="display: flex; justify-content: center;gap: 10px; margin: 30px">
        <el-button style="background-color: #42b983" type="primary" @click="handleClose">取消</el-button>
        <el-button type="primary" @click="saveUser">保存</el-button>
      </div>

    </el-card>
  </div>
</template>

<style scoped>

/* 定义容器的样式 */

.form-header-one{
  float: left;
  font-weight: bold;
  font-size: 20px;
  padding: 0 10px;
}
.form-header-two{
  float: right;
  font-size: 14px;
  color: #7F7F7F;
}
/*.form-header-one{
  display: flex;
  align-items: flex-start;
  justify-content:flex-start;
  height: 40px;
  font-weight: bold; !* 加粗字体 *!
  margin-top:3px;
  padding: 0 10px;
  font-size: 20px;
}*/
.form-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 40px;
  font-weight: bold; /* 加粗字体 */
  padding: 0 10px;
  margin-right:1px;
  font-size: 16px;
  color: #000000;
  background-color:#F2F2F2
}
.custom-input   {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 230px;
  height: 32px;
  padding: 2px 10px 2px 10px;
  font-family: 'Microsoft YaHei UI', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: #000000;
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}
.custom-input-one   {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 32px;
  padding: 2px 10px 2px 10px;
  font-family: 'Microsoft YaHei UI', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: #000000;
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}
.custom-form-item  {
  --el-form-label-font-size: 13.5px;
}
/*啊实打实*/
:deep(.my-label) {
  color: #000000 !important;
  font-weight: normal !important;
}



:deep(.my-content) {
  text-align: left !important;
  color: #7F7F7F !important;
}



</style>